<template>
    <div id='' class='card_menu_tree'>
        <Card :bordered="false" dis-hover class="ivu-mb">
            <div slot="title">
                <Button type="primary" ghost class="ivu-ml" @click="addMenu">添加部门</Button>
                <Button type="primary" ghost class="ivu-ml" v-show="!toggleExpand" @click="handleToggleExpandAll(true)">
                    <Icon type="md-list" />
                    全部展开
                </Button>
                <Button type="primary" ghost class="ivu-ml" v-show="toggleExpand" @click="handleToggleExpandAll(false)">
                    <Icon type="md-list" />
                    全部收起
                </Button>
            </div>
            <div class="tree">
                <Tree ref="myTree" />
            </div>
        </Card>
    </div>
</template>
<script>
import Tree from './tree.vue'
export default {
    name: '',
    inject: ['provideClick'],
    props: [''],
    data() {
        return {
            toggleExpand: true, // 控制收起和展开
            selectedData: []
        };
    },
    components: { Tree },
    computed: {},
    beforeMount() { },
    mounted() { },
    methods: {
        // 延展收起
        handleToggleExpandAll(event) {
            this.toggleExpand = event;
            this.$refs.myTree.togTree(event)
        },
        // 添加菜单
        addMenu() {
            this.provideClick("新增")
        },
    },
    watch: {}
}
</script>
<style lang='less' scoped>
.card_menu_tree .tree {
    width: 100%;
    height: 720px;
    overflow-y: auto;
}
</style>